<template>
	<div class="article-edit">
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
		<el-card class="mt-4 !border-none" header="收款单信息" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="140px">
				<el-form-item label="收款单号：">{{formData.sn}}</el-form-item>
				<el-form-item label="款项类型：">{{formData.type==1?'佣金':''}}</el-form-item>
				<el-form-item label="收款金额（元）：">{{formData.actual_money}}</el-form-item>
				<el-form-item label="合作服务费（元）：">{{formData.service_fee}}</el-form-item>
				<el-form-item label="产品收佣比例：">{{formData.product_commission_rate * 100}}%</el-form-item>
				<el-form-item label="渠道收佣系数：">{{formData.start_level_commission_rate}}</el-form-item>
				<el-form-item label="创建时间：">{{formData.create_time}}</el-form-item>
				<el-form-item label="创建人：">{{formData.user?.real_name}}</el-form-item>
			</el-form>
		</el-card>
		<el-card class="mt-4 !border-none" header="支付信息" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="140px">
				<el-form-item label="支付状态：">{{formData.pay_status==1?'待支付':formData.pay_status==2?'支付中':formData.pay_status==3?'等待确认（对公）':formData.pay_status==4?'已支付':formData.pay_status==5?'支付失败':''}}</el-form-item>
				<el-form-item label="支付方式：">{{formData.pay_type==1?'微信':formData.pay_type==2?'支付宝':formData.pay_type==3?'对公':''}}</el-form-item>
				<el-form-item label="支付账号：">{{formData.pay_account}}</el-form-item>
				<el-form-item label="支付户名：">{{formData.pay_name}}</el-form-item>
				<el-form-item label="支付时间：">{{formData.pay_time}}</el-form-item>
			</el-form>
		</el-card>
		<el-card class="mt-4 !border-none" header="合作信息" shadow="never">
			<el-form ref="formRef" class="ls-form" :model="formData" label-width="140px">
				<el-form-item label="合作编号：">{{formData.cooperation?.sn}}</el-form-item>
				<el-form-item label="完成时间：">{{formData.cooperation?.create_time}}</el-form-item>
				<el-form-item label="用户名称：">{{formData.user?.real_name}}</el-form-item>
				<el-form-item label="产品名称：">{{formData.product.name}}</el-form-item>
				<el-form-item label="渠道名称：">{{formData.channelExtra?.real_name}}</el-form-item>
			</el-form>
		</el-card>
		<footer-btns>
			<el-button type="danger" @click="handleUnPay" plain v-prevent-reclick="3000">未到账</el-button>
			<el-button type="primary" @click="handlePaid" v-prevent-reclick="3000">已到账</el-button>
		</footer-btns>
		<pay v-model:show="checkState.show" @confirm="handlePaidConfirm"></pay>
	</div>
</template>

<script lang="ts" setup name="cooperateDetail">
	import type { FormInstance } from 'element-plus';
	import { commissionOrderDetail, unPay, paid } from '@/api/finance';
	import { getRoutePath } from "@/router";
	import { toRaw, shallowRef } from "vue";
	import {isEmpty} from "@/utils/util";
	import feedback from '@/utils/feedback';
	import pay from './pay.vue';
	const route = useRoute();
	const router = useRouter();
	const formData = reactive({
		id: '',
		sn: '',
		type: null,
		actual_money: null,
		service_fee: null,
		product_commission_rate: null,
		start_level_commission_rate: null,
		create_time: '',
		user: {},
		pay_status: null,
		pay_type: null,
		pay_account: '',
		pay_name: '',
		pay_time: '',
		cooperation: {},
		product: {},
		channelExtra: {},
	})
	const formRef = shallowRef<FormInstance>()
	const handleUnPay = async () => {
	    await feedback.confirm('确认未到账之后单据状态将变“支付失败”且不可更改，请认真核对银行流水，及时与付款人进行联系确认，谨慎操作。是否继续确认未到账？','未到账','none');
		const data = await unPay({ id:formData.id })
		setTimeout(()=>{
			$router.back()
		}, 1000);
	}
	
	const checkState = reactive({
		show: false
	})
	
	const handlePaid = () => {
		checkState.show = true
	}
	
	const handlePaidConfirm = async (value : any) => {
		console.log(value);
		await paid({ id: formData.id, send_pay_name: value.send_pay_name, send_pay_account: value.send_pay_account, pay_time: value.pay_time });
		checkState.show = false;
		setTimeout(()=>{
			$router.back()
		}, 1000);
	}
	
	const getDetails = async () => {
		const data = await commissionOrderDetail({
			id: route.query.id
		})
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
		})
	}
	route.query.id && getDetails()
</script>
<style scoped lang="scss"></style>